<!--
 * @Author: boyyang
 * @Date: 2022-01-22 21:55:38
 * @LastEditTime: 2022-02-20 01:57:25
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\imagesExhibtion\components\imagesItemC.vue
-->

<template>
    <div class="images-item-copy">
        <div :class="['images-wrapper', { 'images-wrapper-pc': !props.isMobile }]">
            <div class="images-box" v-for="(item, i) in props.imgs" :key="i">
                <img
                    :src="item.tempFileURL"
                    alt="item.name"
                    @click="downImg(item.tempFileURL, item.name)"
                />
                <div class="img-name">
                    <span>{{ item.name }}</span>
                </div>
                <div class="del-img" v-show="userInfo?.uid == item.uid">
                    <i class="iconfont icon-qingchu" @click="delImg(props.imgs as [], item._id, i)"></i>
                </div>
                <div class="change-show-type">
                    <tool-tip
                        :text="showType ? '隐藏当前图片' : '公开当前图片'"
                        v-show="userInfo?.uid == item.uid"
                    >
                        <template #icon>
                            <i
                                v-if="showType"
                                class="iconfont icon-yincangbukejian"
                                @click="hiddenAndShow(props.imgs as [], item._id, i)"
                            ></i>
                            <i
                                v-else
                                class="iconfont icon-xianshikejian"
                                @click="hiddenAndShow(props.imgs as [], item._id, i)"
                            ></i>
                        </template>
                    </tool-tip>
                    <tool-tip text="设置为背景图片">
                        <template #icon>
                            <i class="iconfont icon-tupian1" @click="settingBg(item)"></i>
                        </template>
                    </tool-tip>
                </div>
                <div class="thumb-wrapper" @click="imgThumb(item._id)">
                    <i
                        :class="['iconfont icon-dianzan2 img-thumb', { 'img-thumb-active': item.thumbArray && item.thumbArray.includes(userInfo?.uid) }]"
                    ></i>
                    <span class="thumb-num">{{ item.thumb ? item.thumb : 0 }}</span>
                </div>
            </div>
        </div>
    </div>
    <img-preview v-model:is-show="isShow" :url="imgPreviewUrl"></img-preview>
</template>

<script lang="ts" setup>
import { delData, userMes, app, updateOneData, findDataByOpenId, updateOneDataByOpenId } from '@/cloudbase/index'
import { useMessage } from '@/components/message/index'
import { useLoading } from '@/components/fullScreenLoading/index'

interface IImagesItemProps {
    imgs?: any[];
    isMobile?: boolean;
    showType?: boolean;
}

interface IImagesItemEmits {
    (e: 'reload'): void
}

const props = withDefaults(defineProps<IImagesItemProps>(), {
    isMobile: false
})

const isShow = ref<boolean>(false)
const imgPreviewUrl = ref<string>()
const downloadName = ref<string>('')

const emits = defineEmits<IImagesItemEmits>()

const message = useMessage()
const loading = useLoading()

const userInfo = userMes()

const downImg = (d_url: string, name: string) => {
    imgPreviewUrl.value = d_url
    downloadName.value = name
    isShow.value = true

}

const delImg = (imgs: [], id: string, index: number) => {
    loading.start()
    let collectionName: string = props.isMobile ? 'wallpaper_mobile' : 'wallpaper_pc'

    delData(collectionName, id).then((res) => {
        let arr = imgs.splice(index, 1)
        loading.end()
        message.success('删除成功')
    }).catch((err) => {
        message.error(err)
        loading.end()
    })
}

const imgThumb = (_id: string) => {
    app.callFunction({
        name: 'thumbsUp',
        data: {
            id: _id,
            uid: userInfo?.uid,
            collectionName: props.isMobile ? 'wallpaper_mobile' : 'wallpaper_pc'
        }
    }).then((res: any) => {
        message.success(res.result.msg)
        emits('reload')
    })
}

const hiddenAndShow = (imgs: [], id: string, index: number) => {
    let collectionName: string = props.isMobile ? 'wallpaper_mobile' : 'wallpaper_pc'
    let query = props.showType ? { isShow: false } : { isShow: true }
    updateOneData(collectionName, id, query).then((res) => {
        let arr = imgs.splice(index, 1)
        message.success('图片设置隐藏成功')
    })
}

const settingBg = (item: any) => {
    loading.start()
    updateOneDataByOpenId('users', userInfo?.uid as string, {
        download_url: item.download_url,
        tempFileURL: item.tempFileURL,
        fileID: item.fileID,
        filePath: item.filePath,
        create_time: new Date().getTime(),
        type: 'image'
    }).then((res) => {
        loading.end()
        message.success('修改背景成功')
    })
}
</script>

<style scoped lang="scss">
.images-item-copy {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #353540;

    overflow: hidden;

    padding: 0 25px;

    display: flex;
    justify-content: center;
    align-items: center;

    .images-wrapper {
        display: flex;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);

        grid-column-gap: 10px;
        .images-box {
            position: relative;
            overflow: hidden;
            box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.4);
            display: flex;
            justify-content: center;

            .img-name {
                transform: translateY(60px);

                box-sizing: border-box;
                width: 100%;
                height: 50px;
                background-color: rgba(22, 24, 35, 0.4);

                display: flex;
                justify-content: center;
                align-items: center;

                position: absolute;
                bottom: 0;

                padding: 0 10px;

                font-size: 15px;
                color: whitesmoke;

                text-overflow: ellipsis;
                text-align: justify;

                border-radius: 0 0 5px 5px;
            }

            &:hover {
                transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
                transform: scale(1.05);
                z-index: 9;

                .img-name {
                    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
                    transform: translateY(0px);
                }

                .del-img {
                    display: block;
                }

                .change-show-type {
                    top: 0;
                }
            }

            img {
                width: 100%;
                height: 520px;
                border-radius: 5px;
                object-fit: cover;
            }
        }
    }

    .images-wrapper-pc {
        padding: 0 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 20px;
        grid-column-gap: 20px;

        .images-box {
            img {
                width: 100%;
                height: 340px;
                border-radius: 5px;
                object-fit: cover;
            }
        }
    }

    .del-img {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #161823;
        padding: 3px 5px 4px;
        border-radius: 0 5px 0 5px;

        &:hover {
            i {
                color: #f00056;
            }
        }

        i {
            color: whitesmoke;
        }
    }

    .thumb-wrapper {
        box-sizing: border-box;
        background-color: #161823;
        padding: 3px 5px 4px;
        border-radius: 5px 0 5px 0;
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        justify-content: center;
        align-items: center;

        .img-thumb {
            color: whitesmoke;

            font-size: 15px;
            cursor: pointer;

            &:hover {
                color: #f00056;
            }
        }

        .img-thumb-active {
            color: #f00056;
        }

        .thumb-num {
            color: whitesmoke;
            margin-left: 3px;
            font-size: 15px;
        }
    }

    .change-show-type {
        box-sizing: border-box;
        width: 90px;
        height: 25px;
        position: absolute;
        background-color: rgba(22, 24, 35, 1);

        border-radius: 0 0 5px 5px;
        top: -30px;

        transition: all 0.3s linear;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 10px;

        display: flex;
        justify-content: space-around;
        align-items: center;

        i {
            font-size: 25px;
            color: whitesmoke;
            cursor: pointer;
            // padding: 0 10px;
        }
    }
}

@media screen and (max-width: 1000px) {
    .images-item-copy {
        padding: 65px 5px 150px;
        overflow-y: auto;
        display: flex;
        align-items: start;
        .images-wrapper {
            display: flex;
            flex-direction: column;

            .images-box {
                margin-bottom: 10px;
                &:hover {
                    transform: scale(1);
                }
                img {
                    width: 100%;
                    height: auto;
                    // margin-bottom: 10px;
                    border-radius: 5px;
                }
            }
        }
    }

    .del-img {
        display: none;
    }
}
</style>
